<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../vue.js"></script>
		<!-- https://cn.vuejs.org/v2/guide/components-registration.html -->
		<title>组件注册</title>
	</head>
	<body>
		<div id="vm1">

			<p>Message is :{{message}}</p>
			<button-counter title="-- hello"></button-counter>
			<test></test>
		</div>
		
		<script>
			//全局注册
			Vue.component('button-counter',{
				props:['title'],
				data:function(){
					return {}
				},
				template:'<div><h1>h1{{title}}</h1></div>',
				methods:{}
			})
			
			var data = {
				message: '组件注册',
				message2: '',
				seen: true, // false
				url: 'https://cn.vuejs.org/v2/guide/list.html',
				isActive: true,
				isGreen: true,
				color: '#FF0000',
				size: '50px',
				type: 'C',
				isShow: true,
				numbers: [1, 2, 3, 4, 5, 6],
				counter: 0,
				checkedNames: [],
				picked: '',
				txt: 'test',
			}
			
			var vm1 = new Vue({
				el: '#vm1',
				data: data,
				methods: {
					clicknow: function(e) {
						console.log(e)
					}
				},
				
				//局部注册
				components:{
					test:{
						template:'<h2>h2...</h1>'
					}
				}
			})
		</script>
	</body>
</html>
